# Unicloud 阿里云服务器作图床

UniCloud提供免费10G云存储空间，不限流量，底层是阿里云OSS，因此速度非常快

这个源码是利用uniCloud云存储开发的一款图床源码。和网上其他的uniCloud图床源码不一样的是，所有与uniCloud接口交互的部分都由后端php实现，前端只与阿里云OSS交互，不再需要引用uniCloud的vue框架js。

# 使用说明：

第一步，首先注册 (opens new window)一个账号，有账号的可以跳过这一步；

第二步，登录后台，创建一个应用，然后手动将服务空间里的 spaceId 和 clientSecret 配置到本源码的 config.php；

第三步，后面访问首页即可测试。

源码里面已配置好，建议使用自己的spaceId和clientSecret

注意：上传非图片文件需要在后台—云存储上传。

# 下面是自己制作api接口的过程：

# 注：所有想法均为原创，因本人大一技术有限，方法可能比较笨拙，欢迎大佬指出优化。

unicloud上传图片界面：

点击文件详情弹出带有图片url的弹窗

复制url保存到img.txt文件中，然后通过一个php文件获取随机数组然后json返回。

<?php
//存有美图链接的文件名img.txt
$filename = "img.txt";
if(!file_exists($filename)){
    die('文件不存在');
}

//从文本获取链接
$pics = [];
$fs = fopen($filename, "r");
while(!feof($fs)){
    $line=trim(fgets($fs));
    if($line!=''){
        array_push($pics, $line);
    }
}

//从数组随机获取链接
$pic = $pics[array_rand($pics)];

//返回指定格式
$type=$_GET['type'];
switch($type){

//JSON返回
case 'json':
    header('Content-type:text/json');
    die(json_encode(['pic'=>$pic]));

default:
    die(header("Location: $pic"));
}
?>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

但是有大量图片处理时，一个一个复制粘贴属实麻烦。

我第一个想到的是爬虫。

尝试了几次就放弃了（爬虫怕的好，lao饭吃到饱）

第二次尝试使用抓包工具BrupSuite

不出意外又失败了。。。。开启BrupSuite代理后unicloud登录界面直接进不去，登陆不上也无法返回数据

code=400.。。

第三次就是看上传界面的源码找到灵感。

图片上传之后会出现四个复制框分别是url，html,markdown,bbcode四种格式。查看index.php

function(res){
            layer.closeAll();
            $.ajax({
                type : "POST",
                url : "api.php?act=complete_upload",
                data : {id: predata.id},
                dataType : 'json',
                success : function(data) {
                    layer.closeAll();
                    if(data.code == 0){
                        var imgurl = 'https://' + predata.cdnDomain + '/' + predata.ossPath;
                        $("#img-thumb a").attr('href',imgurl);
                        $("#img-thumb img").attr('src',imgurl);
                        $("#url").val(imgurl);
                        $("#html").val("<img src='" + imgurl + "'/>");
                        $("#markdown").val("![](" + imgurl + ")");
                        $("#bbcode").val("[img]" + imgurl + "[/img]");
                        $("#imgshow").show();
                        $("input[name=file]").val(''

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

点击并拖拽以移动

找到返回的imgurl参数，决定将imgurl值直接以txt文件自动下载从而避免自己复制粘贴，后面再写一个bat将txt文件合并。

urlimg导出为txt文件：

      var data = imgurl;
      var name = 'cdk.txt';//文件名
      this.exportRaw(data, name);
exportRaw (data, name) {
      var urlObject = window.URL || window.webkitURL || window;
      var export_blob = new Blob([data]);
      var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
      save_link.href = urlObject.createObjectURL(export_blob);
      save_link.download = name;
      save_link.click();
    },

1
2
3
4
5
6
7
8
9
10
11

实现效果：

bat实现多个txt文件合并：

1.将下载的txt文件放到一个新建的文件夹中；

2.编写bat文件

新建txt文件，写入下面代码，并改为bat文件

for %%a in (*.txt) do (

  more %%a >>all

)

ren all all.txt //返回到all。txt文件

1
2
3
4
5
6
7

批处理文件bat实现多个txt文件合并和换行合并。（因为每个txt文件均为一行url，所以进行换行处理）

注意：

type *.txt >> xxx.txt

此bat不能实现自动换行。

此后只需点击bat文件即可实现合并。

此bat文件小文件能用但是处理大文件就卡住。

1. @echo off & cd /d "%~dp0"
2. echo.添加换行符
3. for %%i in (*.txt) do (
4. •    echo %%i
5. •    echo.>>"%%i"
6. )
7. echo -----------------------
8. echo.合并文件
9. copy /b *.txt data
10. echo -----------------------
11. move /y "data" "data.txt"
12. pause&exit

1
2
3
4
5
6
7
8
9
10
11
12

点击并拖拽以移动

第一个换行是紧接上一个文本内容，这个会多换一行，而且同一个文件里面多次测试会叠加换行符。

# 后续想法：

完善前端把imgurl post到后端

编写一个后端，获取前端imgurl直接存入数据库，将url.txt全部存入数据库

编写一个接口从后端返回数据。

# 这个图床操作流程就先凑合着用吧

← SSE技术内网穿透技术初探 →